<template>
  <div>
    <span class="m-shadow" @click="closeRecommend"></span>
    <div class="m-recommend-div">
      <p class="mb">已推荐成功用户</p>
      <div>
        我已成功邀请<span>0名</span>小伙伴，我的推荐人：美业通
      </div>
      <table>
        <th>
        <td>头像</td>
        <td>用户名</td>
        <td>类型</td>
        <td>消费</td>
        </th>
        <tr v-for="(item,index) in list" :key="index">
          <td><img :src="item.wximage || require('@/assets/images/my.png')" alt=""></td>
          <td>{{item.Name}}</td>
          <td>{{item.type}}</td>
          <td>{{item.Fmoney}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {

      }
    },
    methods: {
      closeRecommend() {
        this.$emit('closeRecommend');
      }
    },
    props: ['list']
  }

</script>
<style lang="less" scoped>
  .m-recommend-div {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    border-radius: 6px 6px 0 0;
    background: white;
    text-align: center;

    p {
      line-height: 3rem;
      border-bottom: 1px solid @background-gray;
    }

    div {
      color: @light-gray;
      font-size: .8rem;

      span {
        color: @primary-red;
      }
    }

    table {
      width: 100%;
      margin-top: .8rem;
      max-height: 30vh;
      overflow-y: scroll;
      display: block;

      tr,
      th {
        .flex;
        margin-bottom: .4rem;

        td {
          flex: 1;
          height: 2rem;

          img {
            width: 1.6rem;
            height: 1.6rem;
            .border-radius(100%);
          }
        }
      }
    }
  }

</style>
